<admintpl file="header" />
<style type="text/css">
    a{cursor: pointer}
	.modal-table{
		margin: 0px auto;
		width:80%;
	}
	.modal-table tr,.modal-table td{
		height: 20px;
		padding: 3px;
	}
	.modal-table tr td input{
		width: 180px;
	}
	#myModal{
		width: 450px;
	}
	#myPromptModal{
		width:300px;
	}
</style>
</head>
<body>
<div class="wrap">
<ul class="nav nav-tabs">
		<li class="active"><a href="{:U('SystemConfig/index')}">配置列表</a></li>
		<li><a href="{:U('SystemConfig/add')}">添加配置</a></li>
		</ul>
		<div id="home_toptip"></div>
        
        <volist name="system_config_list" id="vo">
		<h4 class="well" >{$vo[0]['name']}({$vo[0]['field']})&nbsp;<a class="add-config-item" data-name="{$vo[0]['name']}" data-field="{$vo[0]['field']}" data-toggle="modal" data-target="#myModal">添加</a></h4>
		<div class="home_info" style="margin-left:20px">
            <table class="table table-hover table-bordered" style="width:50%">
				<thead>
					<tr>
						<th>键（key）</th>
						<th>值（value）</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
	                <volist name="vo" id="va">				
	                <tr>
					    <td style="text-align:center" id="key_{$va['id']}">{$va['key']}</td>
					    <td style="text-align:center" id="value_{$va['id']}">{$va['value']}</td>
					    <td style="text-align:center"><a data-id="{$va['id']}" data-value="{$va['name']}" class="edit" data-toggle="modal" data-target="#myModal">编辑</a>&nbsp;|&nbsp;<a data-id="{$va['id']}"  class="delete" data-toggle="modal" data-target="#myPromptModal">删除</a></td>
					</tr>
					</volist>
				</tbody>
	     	</table>
		</div>
        </volist>	
	</div>
	
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body" style="text-align:center;">
				<table class="modal-table"> 
				<tr><td style="text-align:right">键(key)：</td><td><input id="key" name="key" value="" required="required"></td><tr>
				<tr><td style="text-align:right">值(value)：</td><td><input id="value" name="value" value="" required="required"></td><tr>
				</table>
				<input id="id" name="id" value="" type="hidden">
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" id="btn-save" class="btn btn-primary">
					更改
				</button>
				<button type="button" id="btn-add" class="btn btn-primary">
					添加
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<!--消息提示框-->
<div class="modal fade" id="myPromptModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					提示信息
				</h4>
			</div>
			<div class="modal-body" style="text-align:center;color:red;">
			    确定要删除吗？
			</div>
			<div class="modal-footer">
				<input id="delete_id" type="hidden" value="">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消
				</button>
				<button type="button" id="btn-delete" class="btn btn-primary">
					确定删除
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
	<input type="hidden" id="name" value="">
	<input type="hidden" id="field" value="">
</div>
</body>
<script type="text/javascript">
	$(".edit").click(function(){
        var id = $(this).attr('data-id');
        $("#id").val(id);
        $("#myModalLabel").text($(this).attr('data-value'));
        $("#key").val($("#key_"+id).text());
        $("#value").val($("#value_"+id).text());
        $("#btn-add").hide();
        $("#btn-save").show();
	})

	$("#btn-save").click(function(){
		var url = "{:U('SystemConfig/edit')}";
		$.post(url,{id:$("#id").val(),key:$("#key").val(),value:$('#value').val()},function(data){
			if(data.status == 1){
              window.location.reload(); 
            }
		})
	})

	//用户点击删除
	$(".delete").click(function(){
		$("#delete_id").val($(this).attr("data-id"));
	})
	//用户点击确定删除
	$("#btn-delete").click(function(){
		var id  = $("#delete_id").val();
		var url = "{:U('SystemConfig/delete')}";
		$.get(url,{id:id},function(data){
			if(data.status == 1){
				window.location.reload();
			}
		})

	})

	$(".add-config-item").click(function(){
		var name  = $(this).attr("data-name");
		var field = $(this).attr("data-field");
		$("#name").val(name);
		$("#field").val(field);
		$("#myModalLabel").text(name);
		$("#key").val('');
		$("#value").val('');
		$("#btn-add").show();
        $("#btn-save").hide();
	})

	$("#btn-add").click(function(){
        var name  = $("#name").val();
        var field = $("#field").val();
        var key   = $("#key").val();
        var value = $("#value").val();
        var url   =  "{:U('SystemConfig/add_item')}";
        $.post(url,{name:name,field:field,key:key,value:value},function(data){
			if(data.status == 1){
               window.location.reload(); 
            }
		})
	})
</script>
</html>